<template>
  <div class="c" style="height: 100%; display: flex; flex-direction: column">
    <navconH5
      style="background-color: #fff"
      texts="学校详情"
      :leftShow="true"
    />

    <!-- <div
        style="display: flex; justify-content: center"
        v-if="shoolObj.images || shoolObj.video"
      >
        <el-radio-group v-model="isCollapse" style="margin: 20px auto">
          <el-radio-button :value="false" v-if="shoolObj.images"
            >学校照片</el-radio-button
          >
          <el-radio-button :value="true" v-if="shoolObj.video"
            >学校视频</el-radio-button
          >
        </el-radio-group>
      </div> -->

    <!-- <el-carousel
        :interval="5000"
        arrow="always"
        height="200px"
        v-if="shoolObj.images"
        v-show="!isCollapse"
      >
        <el-carousel-item v-for="(item, index) in shoolObj.images" :key="index">
          <div>
            <el-image
              :z-index="99999999"
              :preview-teleported="true"
              style="width: 100%; height: 200px"
              :src="item"
              :preview-src-list="[item]"
            ></el-image>
          </div>
        </el-carousel-item>
      </el-carousel>
      <el-carousel
        :interval="5000"
        arrow="always"
        height="200px"
        :autoplay="false"
        v-show="isCollapse"
        v-if="shoolObj.video"
        @change="pausevideo"
      >
        <el-carousel-item v-for="(item, index) in shoolObj.video" :key="index">
          <video
            
            
            ref="videoref"
            :src="item"
            controls
            style="width: 100%; height: 200px"
          ></video>
        </el-carousel-item>
      </el-carousel> -->
    <!-- 数据重新输入开始 -->
    <div>
      <t-message
        v-if="shoolObj.status == 1"
        theme="error"
        class="shoolmessage warnings"
        v-model="visible"
        content="未核校"
      />
      <t-message
        v-if="shoolObj.status == 2"
        theme="success"
        class="shoolmessage successs"
        v-model="visible"
        content="已核校"
      />
      <t-message
        v-if="shoolObj.status == 3"
        theme="error"
        class="shoolmessage errors"
        v-model="visible"
        content="已驳回"
      />
      <t-message
        v-if="shoolObj.status == 4"
        theme="success"
        class="shoolmessage infos"
        v-model="visible"
        content="已通过"
      />
      <t-message
        v-if="shoolObj.status == 5"
        theme="error"
        class="shoolmessage errors"
        v-model="visible"
        content="问题校"
      />
    </div>
    <div style="height: 100%; overflow-y: scroll">
      <div class="tb_lgj_boxs">
        <div class="titles">基础信息</div>
        <t-form
          ref="rulesForm"
          label-position="lefrt"
          style="font-size: 14px"
          label-align="left"
          :data="formData"
        >
          <t-form-item label="学校名称" prop="school_name" name="school_name">
            {{ shoolObj.school_name }}
          </t-form-item>
          <t-form-item label="所在省" prop="province" name="province">
            {{ shoolObj.province }}
          </t-form-item>
          <t-form-item label="所在区县" prop="county" name="county">
            {{ shoolObj.county }}
          </t-form-item>
          <t-form-item label="所在城市" prop="city" name="city">
            {{ shoolObj.city }}
          </t-form-item>
          <t-form-item label="学校类别" prop="school_type" name="school_type">
            {{ shoolObj.school_type }}
          </t-form-item>
          <t-form-item label="学校人数" prop="school_num" name="school_num">
            {{ shoolObj.school_num }}
          </t-form-item>
          <t-form-item label="班级个数" prop="class_num" name="class_num">
            {{ shoolObj.class_num }}
          </t-form-item>
          <t-form-item label="教师个数" prop="teacher_num" name="teacher_num">
            {{ shoolObj.teacher_num }}
          </t-form-item>
          <!-- 直播工具 -->
          <t-form-item label="学校是否有直播工具" labelWidth="150px">
            <el-tag type="primary" v-if="shoolObj.instrument == '1'">是</el-tag>
            <el-tag type="danger" v-if="shoolObj.instrument == '2'">否</el-tag>
          </t-form-item>
          <!-- 直播工具 end-->
          <t-form-item
            labelWidth="130px"
            label="该项目负责人"
            prop="director_name"
            name="director_name"
          >
            {{ shoolObj.director_name }}
          </t-form-item>
          <t-form-item label="电话" prop="director_phone" name="director_phone">
            {{ shoolObj.director_phone }}
          </t-form-item>
          <t-form-item label="职务">
            {{ shoolObj.job }}
          </t-form-item>
        </t-form>
      </div>
      <div class="tb_lgj_boxs">
        <div class="titles">教学信息</div>
        <t-form
          ref="rulesForm"
          label-position="lefrt"
          style="font-size: 14px"
          label-align="left"
          :data="formData"
        >
          <t-form-item label="年级">
            {{ shoolObj.grade }}
          </t-form-item>
          <t-form-item label="班级">
            {{ shoolObj.class_name }}
          </t-form-item>
          <t-form-item label="班级课程">
            {{ shoolObj.course }}
          </t-form-item>
          <t-form-item label="第几节">
            {{ shoolObj.some }}
          </t-form-item>
          <t-form-item label="周几">
            {{ shoolObj.week }}
          </t-form-item>
          <t-form-item label="上课时间">
            {{ shoolObj.tart_time }}
          </t-form-item>
          <t-form-item label="下课时间">
            {{ shoolObj.end_time }}
          </t-form-item>
          <t-form-item label="实际上课时间" labelWidth="130px">
            {{ shoolObj.num_time }}
          </t-form-item>
          <t-form-item label="在地老师">
            {{ shoolObj.zuser_name }}
          </t-form-item>
          <t-form-item label="联系电话">
            {{ shoolObj.user_phone }}
          </t-form-item>
          <t-form-item label="在地工作人员" labelWidth="130px">
            {{ shoolObj.user_name }}
          </t-form-item>
          <t-form-item label="线上区域负责人" labelWidth="130px">
            {{ shoolObj.zxuser_name }}
          </t-form-item>
          <t-form-item label="是否排课">
            <el-text v-if="shoolObj.is_status == 1" class="mx-1" type="warning"
              >未排课</el-text
            >
            <el-text v-if="shoolObj.is_status == 2" class="mx-1" type="success"
              >已排课</el-text
            >
          </t-form-item>
        </t-form>
      </div>
      <div class="tb_lgj_boxs">
        <div class="titles">其他信息</div>
        <t-form
          ref="rulesForm"
          label-position="lefrt"
          style="font-size: 14px"
          label-align="left"
          :data="formData"
        >
          <t-form-item label="入校时间">
            {{ shoolObj.admission_time }}
          </t-form-item>
          <t-form-item label="入校图片">
            <el-button
              v-if="shoolObj.images"
              type="success"
              size="small"
              @click="imageShows(shoolObj)"
              >查看图片</el-button
            >
            <div v-if="!shoolObj.images">无</div>
          </t-form-item>
          <t-form-item label="入校视频">
            <el-button
              v-if="shoolObj.video"
              type="success"
              size="small"
              @click="videoBiu"
              >查看视频</el-button
            >
            <div v-if="!shoolObj.video">无</div>
          </t-form-item>
          <t-form-item label="问题校原因" v-if="shoolObj.status == 5">
            {{ shoolObj.wenti_remark }}
          </t-form-item>
        </t-form>
      </div>
      <!-- <div style="height: 10vh"></div> -->
      <!-- <div style="height: 10vh" v-if="authority([2, 3, 4])"></div> -->
    </div>

    <BottomAdd v-if="authority([2])">
      <!-- 在地区域负责人 -->
      <div class="boxs_bov_buttons">
        <el-button
          type="success"
          plain
          @click="openOkAll(1)"
          style="width: 100%; height: 40px"
          v-if="shoolObj.status == 2"
          >排课</el-button
        >
        <el-button
          v-if="shoolObj.status == 2"
          type="danger"
          style="width: 100%; height: 40px"
          @click="openOkAll(2)"
          plain
          >驳回</el-button
        >
        <el-button
          v-if="shoolObj.status == 3"
          type="primary"
          style="width: 100%; height: 40px"
          @click="openOkAllcx"
          plain
          >重新核校</el-button
        >
        <el-button
          type="warning"
          style="width: 100%; height: 40px"
          plain
          @click="Problem"
          v-if="shoolObj.status == 1 || shoolObj.status == 2"
          >问题校</el-button
        >
        <el-button
          @click="hxok()"
          type="success"
          v-if="
            shoolObj.status != 2 && shoolObj.status != 3 && shoolObj.status != 5
          "
          style="width: 100%; height: 40px"
          >编辑</el-button
        >
        <el-button
          style="width: 100%; height: 40px"
          type="danger"
          plain
          @click="handleDelete"
          >删除</el-button
        >
      </div>
    </BottomAdd>

    <BottomAdd v-if="authority([4]) && shoolObj.status != 3">
      <!-- 在地底部 -->
      <div class="boxs_bov_buttons" v-if="shoolObj.status != 3">
        <el-button
          v-if="shoolObj.status == 1"
          @click="hxok()"
          type="success"
          style="width: 100%; height: 40px"
          >核校确认</el-button
        >
        <el-button
          type="success"
          plain
          @click="addModuleLogShool()"
          style="width: 100%; height: 40px"
          >添加入校资料</el-button
        >
      </div>
    </BottomAdd>
    <BottomAdd v-if="authority([4]) && shoolObj.status == 3">
      <!-- 在地底部 -->
      <div class="boxs_bov_buttons" v-if="shoolObj.status == 3">
        <el-button
          @click="openOkAllons(shoolObj.id)"
          style="width: 100%; height: 40px"
          >重新核校</el-button
        >
      </div>
    </BottomAdd>
    <BottomAdd
      v-if="authority([3]) && shoolObj.is_status == 1 && shoolObj.status == 4"
    >
      <!-- 在地底部 -->
      <div class="boxs_bov_buttons" v-if="shoolObj.status != 3">
        <el-button
          @click="paikeok()"
          type="primary"
          style="width: 100%; height: 40px"
          >排课确认</el-button
        >
      </div>
    </BottomAdd>
    <!-- 组件 -->
    <!-- <addModuleShool
      v-if="authority([2, 4])"
      ref="addModuleShool"
      @refreshData="refreshData"
    /> -->
    <AddShool
      v-if="authority([2, 4])"
      ref="addModuleShool"
      @endForm="endForm"
    ></AddShool>
    <!-- 入校资料弹窗 -->
    <DiaoLogShool ref="diaologshool" @getData="ShoolDatails" />
    <!-- 图片观看 -->
    <t-image-viewer
      v-model:images="imageUrl"
      v-model:visible="imagsShow"
    ></t-image-viewer>
    <propVideo ref="propVideos" :videoList="shoolObj.video"></propVideo>
  </div>
</template>
  
  <script>
import {
  schoolEdit,
  schoolDel,
  statuss,
  scheduling,
  caicount,
  schoolUpdate, 
} from "@/api/api";
import { ElMessage, ElMessageBox } from "element-plus";
import navconH5 from "@/components/navconH5.vue";

import { setStorage, getStorage } from "@/utils/util";
import BottomAdd from "@/components/bottom_add.vue";
import AddShool from "@/components/h5com/shool/addSchool.vue";
import DiaoLogShool from "../h5_Shool/components/diaologShool.vue";
import { Message } from "tdesign-mobile-vue";
import propVideo from "@/components/h5com/porpViedeo.vue";

export default {
  components: {
    AddShool,
    navconH5,
    BottomAdd,
    DiaoLogShool,
    propVideo,
  },
  data() {
    return {
      visible: true,
      id: this.$route.query.id,
      shoolObj: {},
      isCollapse: false,
      userInfo: "", //用户权限id
      imageUrl: [],
      imagsShow: false,
    };
  },
  watch: {
    isCollapse(val) {
      this.pausevideo();
    },
  },
  mounted(o) {
    // //console.log(o,'----------o') 
    this.ShoolDatails();
  },
  created(o) {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
    // this.ShoolDatails();
  },
  methods: { 
    videoBiu() {
      this.$refs.propVideos.visible = true;
    },
    imageShows(row) {
      this.imagsShow = true;
      this.imageUrl = row.images;
    },
    endForm(obj) {
      let vm = this;
      schoolUpdate(obj).then((res) => {
        if (res.code == 1) {
          vm.$message.success(res.msg);
          this.$refs.addModuleShool.showPopup = false;
          this.shoolObj = obj;

          if (vm.authority([4]) && vm.shoolObj.status == 1) {
            vm.$dialog.confirm({
              title: "核校确认",
              content: `更改成功,是否进行核校确认？`,
              confirmBtn: "确认",
              cancelBtn: "取消",
              onConfirm: () => {
                return statuss({
                  id: vm.shoolObj.id,
                  status: 2,
                }).then((res) => {
                  if (res.code == 1) {
                    vm.$message.success(res.msg);
                    vm.ShoolDatails();
                  }
                });
              },
              onClose: () => {
                return;
              },
            });
          }
        } else {
          Message.error(res.msg || "失败");
        }
      });
    },

    openOkAllons(e) {
      let vm = this;
      vm.$confirm("是否确认选中的数据进行重新核校?", "重新核校", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return statuss({ ids: e, status: 1 }).then((res) => {
          if (res.code == 1) {
            vm.$message.success(res.msg);
            vm.ShoolDatails();
            // vm.getData();
          } else {
            vm.$message.warning(res.msg);
          }
        });
      });
    },
    Problem(row) {
      // 问题校
      let vm = this;
      ElMessageBox.prompt("请输入问题校原因", "问题校", {
        modalClass: "tanchuangshim",
        cancelButtonClass: "el-button el-button--success is-plain", //取消
        confirmButtonClass: "el-button--success", //确定
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /.+/,
        inputErrorMessage: "请输入问题校原因",
      }).then(({ value }) => {
        return schoolUpdate({
          wenti_remark: value,
          id: vm.shoolObj.id,
          status: 5,
        }).then((res) => {
          vm.$message.success(res.msg);
          vm.ShoolDatails();
        });
      });
    },
    // 排课确认
    paikeok() {
      let vm = this;
      // 确认排课
      this.$confirm("确定进行排课确认吗？", "排课确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let objs = {
          id: vm.shoolObj.id,
        };
        scheduling(objs).then((res) => {
          vm.ShoolDatails();
        });
      });
    },
    openOkAllcx() {
      // 重新核校
      let vm = this;
      this.$dialog.confirm({
        title: "重新核校确认",
        content: `是否确认对该校进行重新核校`,
        confirmBtn: "确认",
        cancelBtn: "取消",
        onConfirm: () => {
          return statuss({
            id: vm.shoolObj.id,
            status: 1,
          }).then((res) => {
            if (res.code == 1) {
              Message.success(res.msg);
              vm.ShoolDatails();
              // vm.getData();
            } else {
              Message.success(res.msg);

              // vm.$message.warning(res.msg);
            }
          });
        },
      });

      //   vm.$confirm(`是否确认对该校进行重新核校?`, `重新核校确认`, {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }).then(function () {
      //     return statuss({
      //       id: vm.shoolObj.id,
      //       status: 1,
      //     }).then((res) => {
      //       if (res.code == 1) {
      //         vm.$message.success(res.msg);
      //         vm.ShoolDatails();
      //         // vm.getData();
      //       } else {
      //         vm.$message.warning(res.msg);
      //       }
      //     });
      //   });
    },
    // 在地区域核校操作
    openOkAll(e) {
      let vm = this;
      vm.$dialog.confirm({
        title: `${e == 1 ? "通过" : "驳回"}确认`,
        content: `是否确认对该校进行核校${e == 1 ? "通过" : "驳回"}?`,
        confirmBtn: "确认",
        cancelBtn: "取消",
        type: "warning",
        onConfirm: () => {
          return statuss({
            id: vm.shoolObj.id,
            status:
              e == 1
                ? Number(vm.shoolObj.status) + 2
                : Number(vm.shoolObj.status) + 1,
          }).then((res) => {
            if (res.code == 1) {
              vm.$message.success(res.msg);
              vm.ShoolDatails();
              // vm.getData();
            } else {
              vm.$message.warning(res.msg);
            }
          });
        },
      });
    },
    // 学校弹窗显示
    addModuleLogShool() {
      this.$refs.diaologshool.addPlan(this.shoolObj);
    },
    // 学校删除
    handleDelete() {
      let vm = this;

      vm.$dialog.confirm({
        title: "删除警告",
        content: `是否确认删除当前数据?`,
        confirmBtn: "确认",
        cancelBtn: "取消",
        onConfirm: () => {
          return schoolDel({ id: vm.shoolObj.id }).then((res) => {
            if (res.code == 1) {
              // vm.$message.success(res.msg);
              Message.success(res.msg);

              vm.$router.go(-1);
            } else {
              // vm.$message.warning(res.msg);
              Message.warning(res.msg);
            }
          });
        },
      });
    },
    refreshData(x) {
      this.ShoolDatails();
    },
    // 在校核校确认
    hxok() {
      if (this.authority([4])) {
        this.$refs.addModuleShool.editupdata(this.shoolObj, "核校");
      } else if (this.authority([2])) {
        this.$refs.addModuleShool.editupdata(this.shoolObj, "编辑");
      }
    },
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    pausevideo() {
      // 暂停所有视频
      if (!this.$refs.videoref) return;
      this.$refs.videoref.forEach((video) => {
        if (video) video.pause();
      });
    },
    // 获取基础学校数据
    ShoolDatails() {
      let vm = this;
      schoolEdit({ id: this.id }).then((res) => {
        console.log(res.data, "---获取到的学校数据");
        this.shoolObj = res.data;
        //console.log(res.data.video)

        // isCollapse
        if (res.data.images) {
          return (vm.isCollapse = false);
        }
        if (res.data.video) {
          return (vm.isCollapse = true);
        }
      });
    },
  },
};
</script>
  
  <style>
.c {
  background: rgb(241, 241, 241) !important;
}
.el-form-itemse {
  min-width: 40%;
}
.h5_school_details {
  padding: 15px;
  box-sizing: border-box;
  /* background: #fff; */
}

.shoolmessage {
  position: inherit !important;
  box-sizing: border-box;
  border: none;
}
.infos {
}
</style>
<style lang="scss"  >
.successs {
  background: #e2fff8 !important;
  color: #49b9ad !important;
  .t-message__text {
    color: #49b9ad !important;
  }
}
.warnings {
  background: #fef1f1 !important;
  color: #f6a055 !important;
  .t-message__text {
    color: #f6a055 !important;
  }
}
.infos {
  background: #f3f1fe !important;
  color: #147df5 !important;
  .t-message__text {
    color: #147df5 !important;
  }
}
.errors {
  background: #fef1f1 !important;
  color: #f65755 !important;
  .t-message__text {
    color: #f65755 !important;
  }
}

.tb_lgj_boxs {
  background: #fff;
  margin-bottom: 10px;
  .titles {
    padding: 15px;
    color: #1c2023;
    font-weight: 600;
  }
}
 
</style>
 